<template>
  <div>
    <div style="margin: 0 auto;width: 1000px;">

      <div style="margin: 50px 0 50px 500px;">
        <el-steps :active="2" space="300px" align-center>
          <el-step title="1.加入购物车 " description=""></el-step>
          <el-step title="2.填写核对订单信息" description=""></el-step>
          <el-step title="3.完成订单" description=""></el-step>
        </el-steps>
      </div>
      <div style="margin: 80px 0;">
        <h4>送货信息</h4>
        <div style="margin: 30px auto;font-size: 14px">

          <div style="margin: 30px 0;"> 配送方式 :
            <template>
              <el-radio v-model="radio" label="1">外卖配送</el-radio>
              <el-radio v-model="radio" label="2">到店自取</el-radio>
            </template>
            <div style="margin-top: 30px;color:#F55A19;">※温馨提示： 修改地址请提前6小时来电，如临时修改地址可能会产生额外的费用。</div>

          </div>
          <div v-if="radio==1">
            <div>
              送货地址：
              <el-input v-model="input" readonly size="mini" style="width: 70px;"></el-input>
              <template>
                <el-select v-model="value" size="mini" placeholder="请选择">
                  <el-option
                      v-for="item in cities"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    <span style="float: left">{{ item.label }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                  </el-option>
                </el-select>
              </template>
            </div>
            <el-input v-model="tableData.address" size="mini" placeholder="请输入详细地址" style="width: 288px;margin: 20px 72px;"></el-input>
            <div>
              收货信息：
              <el-input v-model="tableData.consignee" size="mini" placeholder="请输入收货人姓名" style="width: 288px;margin-bottom: 20px;"></el-input><br>
              <el-input v-model="tableData.consigneePhone" size="mini" placeholder="请输入收货人电话" style="width: 288px;margin-bottom: 20px;margin-left: 72px;"></el-input>
            </div>
            <div>
              您的手机：
              <el-input v-model="tableData.phone" size="mini" placeholder="请输入您的手机号码" style="width: 288px;margin-bottom: 20px;"></el-input>
            </div>
          </div>

          <div v-if="radio==2">
            <div style="margin-bottom: 20px;">
              自提货地址 ：
              <template>
                <el-radio >海淀区北三环西路甲18号</el-radio>
              </template>
            </div>

            <div>
              提货人姓名 ：
              <el-input v-model="tableData.consignee" size="mini" placeholder="请输入提货人姓名" style="width: 288px;margin-bottom: 20px;"></el-input><br>
            </div>

            <div>
              提货人手机 ：
              <el-input v-model="tableData.phone" size="mini" placeholder="请输入提货人手机号码 " style="width: 288px;margin-bottom: 20px;"></el-input><br>
            </div>

            <div>
              您的手机号 ：
              <el-input v-model="tableData.phone" size="mini" placeholder="请输入您的手机号码 " style="width: 288px;margin-bottom: 20px;"></el-input>
            </div>

            <div>
              您提货时间 ：
              <span style="position: relative;left: 90px;bottom: 22px">
              <template>
                <div class="block">
                  <span class="demonstration"></span>
                  <el-date-picker size="mini"
                      v-model="value1"
                      type="date"
                      placeholder="选择日期">
                  </el-date-picker>

                  <el-time-select
                      size="mini"
                      v-model="value"
                      :picker-options="{
                        start: '11:00',
                        step: '00:15',
                        end: '18:30'
                    }"
                      placeholder="选择时间">
                  </el-time-select>
                </div>
              </template>
              </span>
            </div>
          </div>
        </div>

      </div>

      <div style="width: 1200px;">
        <h3>商品信息</h3>
        <template>
          <el-table :data="tableData" border style="padding: 0;margin: 0;" max-height="1000" size="mini">
            <el-table-column fixed prop="product" label="商品" width="435"></el-table-column>
            <el-table-column prop="attribute" label="属性" width="200"></el-table-column>
            <el-table-column prop="price" label="单价" width="120"></el-table-column>
            <el-table-column prop="count" label="购买数量" width="100"></el-table-column>
            <el-table-column prop="subtotal" label="小计" width="100"></el-table-column>
            <el-table-column  label="操作">
              <template slot-scope="scope">
                <el-button @click.native.prevent="deleteRow(scope.$index, tableData)"
                           type="text" size="small">移除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>


      <div style="overflow: hidden">
        <div style="width: 1200px;color:#F55A19;">
          ※　温馨提示 ：付费配件可以用会员卡结算;
        </div>
        <div style="margin-right: 200px;position: relative;left: 850px;">
          <div>商品金额:1076元</div>
          <div>总计金额:1076元</div>
        </div>
        <el-divider></el-divider>
      </div>
      <div style="width: 1200px;">
        <el-row>
          <el-button plain style="font-size: 20px">清空购物车</el-button>
          <el-button plain style="font-size: 20px;position: relative;left: 550px;" @click="$router.push('/')">继续购物</el-button>
          <el-button type="warning" style="font-size: 20px;position: relative;left: 580px;" @click="$router.push('/el-main/settlement')">结算</el-button>
        </el-row>
      </div>

      <div style="width: 1200px;margin: 50px 0 0 0px;color:#F55A19;">※　温馨提示：</div>
      <div class="cart-wxts-div">英制规格1磅：约13x13cm 1刀+5碟+5叉 适合2~5人</div>
      <div class="cart-wxts-div">英制规格2磅：约17x17cm 1刀+10碟+10叉 适合5~10人</div>
      <div class="cart-wxts-div">英制规格3磅：约23x23cm 1刀+15碟+15叉 适合9~15人</div>
      <div class="cart-wxts-div">英制规格5磅：约30x30cm 1刀+25碟+25叉 适合15~25人</div>
      <div class="cart-wxts-div">订购5磅以上规格的蛋糕请点击“在线客服”按钮进行咨询订购。</div>






    </div>
  </div>
</template>



<script>
export default {
  data() {
    return {
      consignee:'',
      consigneePhone:'',
      input:'北京',
      cities: [{
        value: 'Beijing',
        label: '北京'
      }, {
        value: 'Shanghai',
        label: '上海'
      }, {
        value: 'Nanjing',
        label: '南京'
      }, {
        value: 'Chengdu',
        label: '成都'
      }, {
        value: 'Shenzhen',
        label: '深圳'
      }, {
        value: 'Guangzhou',
        label: '广州'
      }],
      value: '',
      radio: '1',
      bannerArr:[],
      productArr:[],
      tableData: [{
        product: '2016-05-03',
        attribute: '王小虎',
        price: '上海',
        count: '普陀区',
        subtotal: '上海市普陀区金沙江路 1518 弄',
        right: 200333
      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-08',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-06',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-07',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }]

    }

  },
  methods: {
    deleteRow(index, rows) {
      rows.splice(index, 1);
    }
  },
  mounted() {

  }
}
</script>


<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
.cart-wxts-div{
  font-size: 8px;
  margin-left: 0px;
}
</style>